<template>
    <div class="gpt3">
        <div class="question">
            <div style="height: 15%; display: flex; justify-content: center; align-items: center;">
                <div class="selection-btn">
                    <button :class="{ active: selectedOption === 'gpt3.5' }" @click="selectOption('gpt3.5')">大模型3.5</button>
                    <button :class="{ active: selectedOption === 'gpt4' }" @click="selectOption('gpt4')">大模型4</button>
                </div>
            </div>
            <div style="height: 70%; display: flex; justify-content: center; align-items: center;">
                <div class="chatpdf">
                    <div class="chatpdfBox">
                        <!-- 对这里进行有无对话判断 如果有对话则不显示初始页面 -->
                        <div v-if="msgList.length <= 0" class="prologue">
                            <p style="font-size: 28px;margin: 20px 0px ;">您好，我是****</p>
                            <p style="font-size: 28px;margin: 20px 0px ;">我今天能帮你做什么？</p>
                            <p style="line-height: 1.5;">作为你的智能公关助手，我既能写文案、想点子，又能陪你聊天、答疑解惑。想知道我还能做什么？<a href="#" style="color: blue; text-decoration: none; cursor: pointer;">点这里快速入手！</a>可以浏览器收藏官网地址，下次使用更高效哦~</p>
                            <p style="margin: 20px 0px ;">你可以试着问我：</p>
                            <div class="propose" >
                                <button @click="handleButtonClick(1)" >
                                    <span style="font-weight: bold;font-size: 17px;">写一封律师函</span>
                                    <br>
                                    <span>处理商业侵权</span>
                                </button>
                                <button @click="handleButtonClick(2)" >
                                    <span style="font-weight: bold;font-size: 17px;">向高校写一封建议书</span>
                                    <br>
                                    <span>如何加强高校舆情管理</span>
                                </button>
                            </div>
                            <div class="propose" >
                                <button @click="handleButtonClick(3)" >
                                    <span style="font-weight: bold;font-size: 17px;">为我制作一样折线图</span>
                                    <br>
                                    <span>分析舆情的热度与走向</span>
                                </button>
                                <button @click="handleButtonClick(4)" >
                                    <span style="font-weight: bold;font-size: 17px;">为我制作一张网页</span>
                                    <br>
                                    <span>要求展示企业的良好形象</span>
                                </button>
                            </div>
                        </div>
                        <div v-if="msgList.length > 0" class="chatpdfLine">
                            <div class="chatpdfLineScroll">
                                <div class="chatpdfRow" v-bind:class="{'chatpdfAsk': item.type=='ask'}" v-for="(item,index) in msgList" :key="index">
                                    <div class="chatpdfContent" v-html="html(item.content)"></div>
                                </div>
                                <div v-if="response.length > 0" class="chatpdfRow chatpdfContent" style="padding: 10px;" v-html="html(response)"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="height: 15%; display: flex; justify-content: center; align-items: center;">
                <div class="chat-input-wrapper">
                    <textarea v-model="question" placeholder="请输入您的问题" class="chat-input" @keydown.enter.prevent="handleEnterKey" @keydown.shift.enter="handleShiftEnterKey" :readonly="isTyping"></textarea>
                    <button @click="submitQuestion" class="submit-button">
                        <el-icon :size="20" :class="{'is-loading': isTyping}" style="color: white; padding-right: 2.5px; padding-top: 2.5px; padding-left: 3px;">
                            <svg v-if="!isTyping" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-578.304V704h-64V247.296L237.248 490.048 192 444.8 508.8 128l316.8 316.8-45.312 45.248z"></path></svg>
                            <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32m0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32m448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32m-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32M195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0m-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"></path></svg>
                        </el-icon>
                    </button>
                </div>
            </div>
        </div>
        <div class="selection">
            <div style="height: 30%;margin-bottom: 0;">
                <div class="fine-tune">
                    <div style="width: 100%; align-items: center; text-align: center;padding-top: 15px;">
                        <el-icon style="color: #007bff; padding-right: 5px; padding-top: 2px;"><svg style="color: #007bff; font-weight: bold;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M389.44 768a96.064 96.064 0 0 1 181.12 0H896v64H570.56a96.064 96.064 0 0 1-181.12 0H128v-64zm192-288a96.064 96.064 0 0 1 181.12 0H896v64H762.56a96.064 96.064 0 0 1-181.12 0H128v-64zm-320-288a96.064 96.064 0 0 1 181.12 0H896v64H442.56a96.064 96.064 0 0 1-181.12 0H128v-64z"></path></svg></el-icon>
                        <span style="color: #007bff; font-weight: bold;font-size: 20px;">精准微调</span>
                    </div>
                    <div class="select" style="display: flex;">
                        <el-select
                            v-model="value1"
                            clearable
                            placeholder="选择领域"
                            size="large"
                            style="width: 110px;margin-right: 20px;margin-left: 10px;"
                            >
                            <el-option
                                v-for="item in options1"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                        <el-select
                            v-model="value2"
                            clearable
                            placeholder="选择专题"
                            size="large"
                            style="width: 110px"
                            >
                            <el-option
                                v-for="item in options2"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </div>
                    <div class="select" style="display: flex;">
                        <el-select
                            v-model="value3"
                            clearable
                            placeholder="倾向性"
                            size="large"
                            style="width: 110px;margin-right: 20px;margin-left: 10px;"
                            >
                            <el-option
                                v-for="item in options3"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                        <el-select
                            v-model="value4"
                            clearable
                            placeholder="数据来源"
                            size="large"
                            style="width: 110px"
                            >
                            <el-option
                                v-for="item in options4"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </div>
                </div>
            </div>
            <div style="height: 70%;margin-top: 0;">
                <div class="history">
                    <div style="width: 100%; align-items: center; padding-top: 5px;">
                        <button class="btn-new-dialog" @click="resetDialog">新建对话</button>
                    </div>
                    <hr style="border: 1px solid #ccc;width:80%;margin: 25px auto auto auto;">
                    <div class="search-input-wrapper">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="33" height="33" style="" filter="none">
                        <g>
                            <path d="M19.427 21.427c-1.39 0.99-3.090 1.573-4.927 1.573-4.694 0-8.5-3.806-8.5-8.5s3.806-8.5 8.5-8.5c4.694 0 8.5 3.806 8.5 8.5 0 1.837-0.583 3.537-1.573 4.927l5.585 5.585c0.55 0.55 0.546 1.431-0 1.976l-0.023 0.023c-0.544 0.544-1.431 0.546-1.976 0l-5.585-5.585zM14.5 21c3.59 0 6.5-2.91 6.5-6.5s-2.91-6.5-6.5-6.5c-3.59 0-6.5 2.91-6.5 6.5s2.91 6.5 6.5 6.5v0z" fill="rgba(187,187,187,0.6)"></path>
                        </g>
                        </svg>
                        <input v-model="search" placeholder="搜索历史记录" class="search-input" @keydown.enter.prevent="handleEnterKey" @keydown.shift.enter="handleShiftEnterKey">
                    </div>
                    <hr style="border: 1px solid #ccc;width:80%;margin: 0px auto 15px auto;">
                    <!-- 如果 searchMode 为 true -->
                    <div v-if="searchMode===true">
                        <div v-if="searchIndices.length === 0">
                            <span class="no-history-content">未找到匹配结果</span>
                        </div>
                        <div v-else>
                            <div v-for="(index, idx) in searchIndices" :key="idx">
                                <div v-if="isFirstOfTitle(hisList[index].date, index)" 
                                    style="text-align: left; font-size: 8px; font-weight: bold; color: #330; line-height: 1;margin-left:30px;margin-top:10px">
                                    {{ hisList[index].date }}
                                </div>
                                <!-- 生成按钮 -->
                                <button @click="getDialog(index)"
                                    style="text-align: center; font-size: 16px; font-weight: bold; color: #666;line-height: 1.5; background-color: transparent; border: none; cursor: pointer; margin: 5px auto; display: block;">
                                    {{ hisList[index].title }}
                                </button>
                            </div>
                        </div>
                    </div>
                    <div v-else>
                    <!-- 显示标题列表 -->
                        <div v-if="hisList == null">
                            <span class="no-history-content">还没有找到历史对话，快来向我提问吧！</span>
                        </div>
                        <div v-else>
                            <div v-for="(item, index) in hisList" :key="index">
                                <!-- 判断当前按钮是否为该类型的第一个按钮，如果是，则生成类型文字 -->
                                <div v-if="isFirstOfTitle(item.date, index)" 
                                    style="text-align: left; font-size: 8px; font-weight: bold; color: #330; line-height: 1;margin-left:30px;margin-top:10px">
                                    {{ item.date }}
                                </div>
                                <!-- 生成按钮 -->
                                <button @click="getDialog(index)"
                                    style="text-align: center; font-size: 16px; font-weight: bold; color: #666;line-height: 1.5; background-color: transparent; border: none; cursor: pointer; margin: 5px auto; display: block;">
                                    {{ item.title }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import MarkdownIt from 'markdown-it';
import hljs from 'highlight.js';
import 'highlight.js/styles/monokai-sublime.css';
import axios from 'axios';


export default {
    name: 'gpt3',
    data() {
        return {
            selectedOption: 'gpt3.5', // 默认选中 '大模型3.5'
            question: '' ,// 用于存储用户输入的问题
            search:'', //用来存储用户搜索的关键词
            collects:[],
            collect:"test",
            askContent:"",
            articleId:'',
            searchMode:false,
            searchIndices : [],
            msgList:[
                /*{type:"ask",content:"C呼文章 · 与知识库AI聊天"},
                {type:"answer",content:"我是知识库机器人，有什么想问的吗？我是知识库机器人，有什么想问的吗？我是知识库机器人，有什么想问的吗？我是知识库机器人，有什么想问的吗？我是知识库机器人，有什么想问的吗？"},
                {type:"ask",content:"C呼文章 · 与知识库AI聊天"},
                {type:"answer",content:"我是知识库机器人，有什么想问的吗？我是知识库机器人，有什么想问的吗？我是知识库机器人，有什么想问的吗？我是知识库机器人，有什么想问的吗？我是知识库机器人，有什么想问的吗？"},
                {type:"ask",content:"C呼文章 · 与知识库AI聊天"},
                {type:"answer",content:"我是知识库机器人，有什么想问的吗？我是知识库机器人，有什么想问的吗？我是知识库机器人，有什么想问的吗？我是知识库机器人，有什么想问的吗？我是知识库机器人，有什么想问的吗？"},
                {type:"ask",content:"C呼文章 · 与知识库AI聊天"},
                {type:"answer",content:"我是知识库机器人，有什么想问的吗？我是知识库机器人，有什么想问的吗？我是知识库机器人，有什么想问的吗？我是知识库机器人，有什么想问的吗？我是知识库机器人，有什么想问的吗？"},*/
            ],
            value1: '',
            options1:[
            {
                value: '商业消费',
                label: '商业消费',
            },
            {
                value: '政治法律',
                label: '政治法律',
            },
            {
                value: '社会民生',
                label: '社会民生',
            },
            {
                value: '文化娱乐',
                label: '文化娱乐',
            },
            ],
            value2: '',
            options2:[
            {
                value: '农产品',
                label: '农产品',
            },
            {
                value: '治安',
                label: '治安',
            },
            {
                value: '药物',
                label: '药物',
            },
            {
                value: '名人',
                label: '名人',
            },
            {
                value: '其他',
                label: '其他',
            },
            ],
            value3: '',
            options3:[
            {
                value: '正面',
                label: '正面',
            },
            {
                value: '中性',
                label: '中性',
            },
            {
                value: '负面',
                label: '负面',
            },
            ],
            value4: '',
            options4:[
            {
                value: '微博',
                label: '微博',
            },
            {
                value: '小红书',
                label: '小红书',
            },
            {
                value: '知乎',
                label: '知乎',
            },
            {
                value: '贴吧',
                label: '贴吧',
            },
            {
                value: '抖音',
                label: '抖音',
            },
            {
                value: '今日头条',
                label: '今日头条',
            },
            {
                value: '新闻报道',
                label: '新闻报道',
            },
            {
                value: '地方网站',
                label: '地方网站',
            },
            {
                value: '其他',
                label: '其他',
            },
            ],
            hisList:[
              {date:"昨天",title:"如何处理知识产权侵权",
              HisMsg:[{type:"ask",content:"C呼文章 · 与知识库AI聊天"},
              {type:"answer",content:"我是知识库机器人，有什么想问的吗？"}]},
              {date:"昨天",title:"如何处理舆情公关危机"},
              {date:"昨天",title:"如何与公众及媒体沟通"},
              {date:"昨天",title:"如何处理舆情公关危机"},
              {date:"昨天",title:"如何进行舆情监测分析"},
              {date:"过去七天",titlet:"如何处理知识产权侵权"},
              {date:"过去七天",title:"如何处理舆情公关危机"},
              {date:"过去七天",title:"如何处理舆情公关危机"},
            ],
            setup()
            {
                //简单数据的响应
                const imgUrl=ref('search.png') 
                return {imgUrl}
            },
            controller: new AbortController(),
            isStopped: false,
            memory: [], // 用于存储提问和回答记录的数组
            response: '',
            isTyping: false,
        };
    },
    methods: {
        selectOption(option) {
            this.selectedOption = option;
            // 在这里可以添加逻辑来处理选中选项后的操作
        },

        async submitQuestion() {
            this.controller = new AbortController()
            this.isStopped = false
            this.isTyping = true

            // 判断输入框是否为空
            if (this.question.trim() === '') {
                return; // 如果为空，则不处理
            }

            let quest = this.question
            // 清空输入框
            this.question = '';
            // 将用户输入的问题添加到消息列表中
            this.msgList.push({
                type: 'ask',
                content: quest
            });

            this.scrollBottom()
            let message = ''

            let mem = this.memory.map(item => item.question).join('\n'); // 将数组转换为字符串，并用换行符分隔每个问题

            try {
                let whole_question = `这是之前的三个问题：\n${mem}\n这是我这次的问题，请你好好回答：${this.question}`;
                let supplement = '当前问题领域为：'+this.value1+',当前问题专题为：'+this.value2+'当前舆论倾向性为：'+this.value3+',你可以从'+this.value4+'中搜索相关知识。'
                // console.log("mem"+mem)
                console.log(whole_question)
                const res = await fetch('http://127.0.0.1:5000/stream', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ question: whole_question + supplement }),
                    signal: this.controller.signal
                });

                const reader = res.body.getReader();
                while (true) {
                    if (this.isStopped) break;
                    const { done, value } = await reader.read();
                    if (done) break;
                    message += new TextDecoder().decode(value);
                    this.response += new TextDecoder().decode(value);
                }

                this.response = ''

                this.msgList.push({
                    type: 'answer',
                    content: message 
                });

                this.scrollBottom()
            } catch (error) {
                console.error('Error sending question:', error);
                // 在发生错误时，可以添加一条错误消息到消息列表中
                this.msgList.push({
                    type: 'answer',
                    content: '抱歉，出现了一些问题，请稍后再试。'
                });
                this.scrollBottom()
            }

            // 将用户提问和 GPT 回答记录到 memory 数组中
            this.memory.push({
                question: quest,
                answer: message // 这里需要根据实际情况获取 GPT 的回答
            });

            // 限制 memory 数组长度为 3，保留最近的 3 个记录
            if (this.memory.length > 3) {
                this.memory = this.memory.slice(this.memory.length - 3);
            }
            this.isTyping = false

        },
        scrollBottom(){
            var _this=this;
            this.$nextTick(function(){
                var container = _this.$el.querySelector(".chatpdfLine");
                container.scrollTop = 999999999;
            });
        },

        searchTitle() {
            let searchIndices = []; // 保存包含搜索结果的索引集合

            let regex = new RegExp(this.search.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&'), 'i'); // 转义特殊字符并忽略大小写

            for (let i = 0; i < this.hisList.length; i++) {
                let title = this.hisList[i].title;
                if (regex.test(title)) {
                    searchIndices.push(i); // 将包含搜索结果的索引添加到集合中
                }
            }

            this.searchIndices = searchIndices;
            // 清空输入框
            this.search = '';
        },

        handleEnterKey(event) {
            if (event.key === 'Enter' && !event.ctrlKey && !event.shiftKey) {
                event.preventDefault(); // 阻止默认的换行行为
                if(this.search.trim()!=='' && this.question.trim()==='')
                {
                    this.searchMode=true;
                    this.searchTitle();
                }
                else if(this.search.trim()==='' && this.question.trim()!=='')
                {
                    this.searchMode=false;
                    this.submitQuestion(); // 调用提交问题的方法
                }
                else if(this.search.trim()==='' && this.question.trim()==='')
                {
                    this.searchMode=false;
                }
            }
        },
        handleShiftEnterKey(event) {
            if (event.key === 'Enter' && event.shiftKey) {
                event.preventDefault(); // 阻止默认的换行行为
                this.question += '\n'; // 插入换行符
            }
        },
        html(sourceStr) {
            const md = new MarkdownIt({
                highlight: function (str, lang) {
                    if (lang && hljs.getLanguage(lang)) {
                        try {
                            return '<pre class="hljs"><code>' +
                                    hljs.highlight(lang, str, true).value +
                                    '</code></pre>';
                        } catch (__) {}
                    }
        
                    return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
                }
            });
    
            return md.render(sourceStr);
        },
        handleButtonClick(num) {
            // console.log('num:', num);
            switch (num){
                case 1:
                    this.question = '写一封律师函，处理商业侵权'
                    break
                case 2:
                    this.question = '向高校写一封建议书。如何加强高校舆情管理'
                    break
                case 3: 
                    this.question = '为我制作一样折线图，分析舆情的热度与走向'
                    break
                case 4:
                    this.question = '为我制作一张网页，要求展示企业的良好形象'                
            }

            this.submitQuestion()
        },

        isFirstOfTitle(date, index) {
            if (index === 0) {
                return true;} // 如果是第一个按钮，则是该类型的第一个按钮}
            // 判断前一个按钮的类型是否与当前按钮的类型不同
            return this.hisList[index - 1].date !== date;
        },

        getDialog(index) {
            // 获取当前点击的历史记录项
            const selectedHistory = this.hisList[index];
            this.msgList = [];
            this.memory = []

            // 判断历史记录中是否有对话内容
            if (selectedHistory.HisMsg && selectedHistory.HisMsg.length > 0) {
            // 将历史对话记录添加到消息列表中
                selectedHistory.HisMsg.forEach(item => {
                this.msgList.push({
                    type: item.type,
                    content: item.content
                });
                // console.log(item.type == 'ask')
                if (item.type == 'ask'){
                    this.memory.push({
                        question: item.content,
                        answer: ''
                    })                    
                }
                if (this.memory.length > 3) {
                    this.memory = this.memory.slice(this.memory.length - 3);
                }
            });
                // console.log('***********')
                // console.log(this.msgList)
                // console.log(this.memory)
            } else {
                this.msgList.push({
                    type: 'answer',
                    content: "还没有对话，试着向我提问吧！"
                });
            }
        },

        resetDialog() {
            // 将现有消息列表 保存到后端数据库

            // 同步放入hislist列表中
            // 创建一个新的对象，包含date、title和HisMsg  
            const newItem = {  
                date: '今天', // 根据需要设置日期  
                title: this.msgList[0].content, // 设置标题  
                HisMsg: this.msgList, // 使用现有的msgList作为HisMsg的值  
            };  
                
            // 将新创建的对象添加到hisList中  
            this.hisList.unshift(newItem); 
            // 清空消息列表
            this.msgList = [];

            // 清空问题输入框
            this.question = '';
        },
    }
};
</script>

<style scoped>
.gpt3 {
    display: flex;
    height: 100%;
    background-color: #f9f9f9;
    overflow-y: auto; /* 允许内容溢出时垂直滚动 */  
    scrollbar-width: none; /* Firefox */  
    -ms-overflow-style: none; /* IE and Edge */  
    /* 添加自定义滚动条样式（WebKit浏览器，如Chrome和Safari） */  
    &::-webkit-scrollbar {  
        display: none; /* 隐藏滚动条 */  
    }  
}

.question {
    flex: 3;
    height: 100%;
    display: flex;
    flex-direction: column; /* 将子元素垂直排列 */
    justify-content: center; /* 在主轴上居中对齐 */
}

.selection {
    flex: 1;
    height: 100%;
}

.selection-btn {
    width: 50%;
    display: flex;
    justify-content: space-evenly;
    border-radius: 20px;
    overflow: hidden;
    background-color: white;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
}

.selection-btn button {
    flex: 1;
    padding: 10px;
    border: none;
    outline: none;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.3s;
}

.selection-btn button:hover {
    background-color: #ccc;
}

.selection-btn button.active {
    background-color: #007bff;
    color: #fff;
}

.chat-input-wrapper {
  display: flex;
  align-items: center;
  justify-content: center; /* 在交叉轴上居中对齐 */
  border-radius: 20px; /* 圆角 */
  border: 1px solid #ccc;
  overflow: hidden;
  width: 70%;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */

}

.chat-input {
  flex: 1;
  padding: 10px;
  border: none;
  outline: none;
  background: transparent;
  resize: none; /* 禁止手动拉伸 */
  overflow: hidden; /* 处理多行文字显示问题 */
  min-height: 20px; /* 设置最小高度 */
  max-height: 100%; /* 设置最大高度 */
  box-sizing: border-box; /* 保证边框和内边距不会增加高度 */
  font-size: larger;
}

.submit-button {
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 50%; /* 圆形 */
  cursor: pointer;
  outline: none;
  margin-left: auto; /* 将按钮放置在右侧 */
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */

}

.submit-button:hover {
  background-color: #0056b3;
}

.chatpdf{
    display: flex;
    height: 100%;
    flex-direction: row;
    width: 85%;
    border: none;
    text-align: center;
    padding: 10px 20px;    
    position: relative;
    /* margin-top: 50px; */
}

.chatpdfBox{
    display: flex;
    flex-direction: column;
    flex: 1;
    background: white;
    background-size: cover;
    background-attachment: fixed;
    border-radius: 20px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */

}
.chatpdfHeader{
    font-size: 18px;
    padding: 10px;
    text-align: center;
    width: 100%;
}
.chatpdfLine{
    flex: 1;
    width: 100%;
    overflow-y: auto;
}
.chatpdfLine {  
    flex: 1;  
    width: 100%;  
    overflow-y: auto; /* 允许内容溢出时垂直滚动 */  
    scrollbar-width: none; /* Firefox */  
    -ms-overflow-style: none; /* IE and Edge */  
    /* 添加自定义滚动条样式（WebKit浏览器，如Chrome和Safari） */  
    &::-webkit-scrollbar {  
        display: none; /* 隐藏滚动条 */  
    }  
}

.chatpdfLineScroll{
    max-width: 100%;
    margin: 0 auto;
}
.chatpdfRow{
    margin: 20px 10px;
    display: flex;
}
.chatpdfAsk{
    justify-content: flex-end;
}
.chatpdfContent{
    line-height: normal;
    display: block;
    border-radius: 8px;
    padding:2px 10px;
    max-width: 100%;
    background: linear-gradient(90deg, rgb(3, 121, 247) 10.79%, rgba(3, 121, 247) 87.08%);
    font-size: 14px;
    box-shadow:  0px 0.3px 0.9px rgba(0, 0, 0, 0.12), 0px 1.6px 3.6px rgba(0, 0, 0, 0.16);
    color: #fff;
    text-align: left;
    /* padding: 10px; */
}
.chatpdfAsk .chatpdfContent{
    background: rgba(255, 255, 255, 0.6);
    color: #070707;
    text-align: left;
}

.chatpdfContent pre{
    padding: 10px;
}

.prologue {
    text-align: left;
    margin: 3% 8%;
    
}
.propose {
    display: flex;
    height: 24%;
    margin: 13px;
}
.propose button {
    flex: 1; 
    margin-right: 10px; 
    border-radius: 8px; 
    cursor: pointer;
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.2);
    text-align: left;
    padding-left: 5%;
}

.fine-tune {
    border-radius: 20px;
    background-color: white;
    height: 80%;
    margin-top: 10%;
    margin-right: 10%;
    align-items: center;
}

.select {
    display: flex;
    margin-left: 15px;
    margin-top: 13px;
}
.select el-select {
    flex:1;
}

.history {
    border-radius: 20px;
    background-color: white;
    height: 90%;
    margin-right: 10%;
    align-items: center;
}

.history .btn-new-dialog {
    background-color: #007bff;
    color: white;
    padding: 15px;
    text-align: center;
    font-size: 20px;
    border-radius: 15px;
    width: 200px;
    height: 55px;
    margin: 18px auto 0 auto;
    display: block;
    font-weight: bold;
    border: none;
    cursor: pointer;
    outline: none;
    }

.no-history-content{
    text-align: center; 
    font-size: 16px; 
    font-weight: bold; 
    color: #666;
    margin: 100px auto; 
    display: block;
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    justify-content: center; /* 在交叉轴上居中对齐 */
    border: none;
    width: 70%;
    margin: auto auto;
}

.search-input {
    border:none;
    outline: none;
    font-size: 18px;
    width: 100%; /* Set the width of the input */
    text-align: center;
    font-weight: bold; /* 将文本加粗 */
    margin: 10px 10px;
    color:#999
}

.search-input::placeholder {
    color: #BBB9B9B9;
}

</style>